<div mat-dialog-title>
  <div class="flex flex-row gap-x-2 heading-2">
    <span>Playlist:</span>
    {{ data.name }}
  </div>
  <div *ngIf="playlistInfo | async as info">
    {{ info.tracks.totalElements }} tracks
  </div>
</div>

<div mat-dialog-content>
  <div class="grid place-items-center" *ngIf="isLoadingResults | async">
    <mat-spinner></mat-spinner>
  </div>
  <app-track-data-table
    *ngIf="(isLoadingResults | async) === false"
    [trackTableData]="trackTableData"
  ></app-track-data-table>
</div>

<div mat-dialog-actions align="end">
  <button
    data-cy="delete-playlist-btn"
    mat-stroked-button
    (click)="onDeletePlaylist()"
    color="warn"
  >
    <mat-icon>delete</mat-icon>
    <span class="hidden md:inline"> Delete playlist </span>
  </button>
  <button data-cy="add-playlist" mat-stroked-button (click)="onAddPlaylist()">
    <mat-icon>add</mat-icon>
    <span class="hidden md:inline"> Add playlist </span>
  </button>
  <button mat-stroked-button matDialogClose>
    <mat-icon>close</mat-icon>
    <span class="hidden md:inline"> Close </span>
  </button>
</div>
